import React, { useState, useEffect } from 'react';
import Clock from 'react-clock';
import styles from './index.less';

/**
 * 首页界面
 * @author SPY
 * @date 2020/04/02
 */
const Home = () => {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const clock = setInterval(() => {
      setTime(new Date());
    }, 1000);
    return () => {
      clearInterval(clock);
    };
  }, []);

  return (
    <div>
      <Clock
        className={styles.clock}
        size={250}
        value={time}
        renderNumbers
        hourHandWidth={6}
        hourMarksWidth={4}
        minuteHandWidth={3}
        secondHandWidth={2}
        secondHandLength={85}
      />
      <div className={styles.motto}>
        <b>不逼自己一把，永远不知道自己有多强！</b>
      </div>
    </div>
  );
};

Home.title = '首页';

export default Home;
